<template>
  <a-modal
    v-model:open="visible"
    title="角色信息"
    :footer="null"
    width="750px"
    centered
    @cancel="handleClose"
  >
    <div v-if="roleInfo" class="role-info-content">
      <!-- 角色头像和基本信息 -->
      <div class="role-header">
        <div class="role-avatar-section">
          <a-avatar
            :size="80"
            :src="roleInfo.avatarUrl"
            :style="roleInfo.avatarUrl ? {} : { backgroundColor: getRoleColor(roleInfo.id), color: 'white' }"
            class="role-avatar"
          >
            {{ (roleInfo.roleName || '角色')[0]?.toUpperCase() || 'R' }}
          </a-avatar>
          <div class="online-status-badge">
            <div class="status-dot"></div>
            <span class="status-text">在线</span>
          </div>
        </div>

        <div class="role-basic-info">
          <h3 class="role-name">{{ roleInfo.roleName || '未知角色' }}</h3>
          <div class="role-meta">
            <a-tag color="green" v-if="roleInfo.knowledgeId">
              <template #icon>
                <Brain :size="12" />
              </template>
              知识库: {{ roleInfo.knowledgeName || '未命名' }}
            </a-tag>
          </div>
        </div>
      </div>

      <!-- 角色描述 -->
      <div class="role-description">
        <h4 class="section-title">
          <MessageSquare :size="16" />
          角色设定
        </h4>
        <div class="description-content">
          <p v-if="roleInfo.prompt" class="prompt-text">
            {{ roleInfo.prompt }}
          </p>
          <p v-else class="no-prompt">
            暂无角色设定
          </p>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-content">
      <a-spin size="large" tip="加载角色信息中..." />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Modal, Avatar, Tag, Spin } from 'ant-design-vue'
import { MessageSquare, Brain, Zap, MessageCircle } from 'lucide-vue-next'
import type { ChatRoomRoleVO } from '@/api/generated/data-contracts'

interface Props {
  open: boolean
  roleInfo?: ChatRoomRoleVO
}

interface Emits {
  (e: 'update:open', value: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  open: false,
  roleInfo: undefined
})

const emit = defineEmits<Emits>()

// 响应式状态
const visible = computed({
  get: () => props.open,
  set: (value) => emit('update:open', value)
})

// 获取角色颜色
const getRoleColor = (roleId?: string) => {
  const colors = [
    '#6366f1', '#8b5cf6', '#ec4899', '#ef4444',
    '#f59e0b', '#10b981', '#06b6d4', '#3b82f6'
  ]
  if (!roleId) return colors[0]
  const index = roleId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
  return colors[index % colors.length]
}

// 处理关闭
const handleClose = () => {
  visible.value = false
}

// 监听弹窗打开状态
watch(visible, (newVal) => {
  if (newVal && props.roleInfo) {
    // 弹窗打开时可以在这里加载更多角色信息
    console.log('角色信息弹窗打开:', props.roleInfo)
  }
})
</script>

<style scoped>
.role-info-content {
  padding: 8px 0;
}

.role-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.role-avatar-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.role-avatar {
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.online-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 12px;
  font-size: 12px;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #52c41a;
  border-radius: 50%;
}

.status-text {
  color: #52c41a;
  font-weight: 500;
}

.role-basic-info {
  flex: 1;
}

.role-name {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #262626;
}

.role-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.role-description {
  margin-bottom: 24px;
}

.description-content {
  background: #fafafa;
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid #1890ff;
}

.prompt-text {
  margin: 0;
  line-height: 1.6;
  color: #595959;
  white-space: pre-wrap;
}

.no-prompt {
  margin: 0;
  color: #bfbfbf;
  font-style: italic;
}

.role-capabilities {
  margin-bottom: 24px;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.capability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: #fafafa;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.capability-item.active {
  background: #f6ffed;
  border-color: #b7eb8f;
}

.capability-item span {
  font-size: 12px;
  font-weight: 500;
  color: #595959;
  text-align: center;
}

.role-stats {
  margin-bottom: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #8c8c8c;
}

.loading-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

/* 响应式设计 */
@media (max-width: 576px) {
  .role-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .capabilities-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* 动画效果 */
.role-info-content {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
